<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-02-09 11:49:48
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-02-13 11:51:47
 * @FilePath: /com.huizhouyiren.c1001/components/customNavbar/index.vue
 * @Description: 自定义导航栏组件
-->
<template>
	<view class="navbar" :class="showBorder ? 'show_border' : ''" :style="{'padding-top':statusBar +
    'px','background':background}" style="box-sizing: border-box;">

		<view class="title" style="display: flex;justify-content: center;align-items: center;position: relative;"
			:style="{ 'height': navBarHeight + 'px', 'color': color }">
			<view
				style="position: absolute;top:0;left: 20rpx;height: 100%;display: flex;justify-content: center;align-items: center;">
				<slot name='prefix'></slot>
			</view>
			<view v-if="showBack" class=""
				style="width: 80rpx;position: absolute;top:0;left: 0;height: 100%;display: flex;justify-content: center;align-items: center;"
				@click="goback">
				<image :src="commonImages.whiteLeftArrow" mode="widthFix" style="width:20rpx" v-if="color == 'white'" />
				<image :src="commonImages.leftArrow" mode="widthFix" style="width:20rpx" v-else />
			</view>
			<view class="title_font" style="flex:1;padding: 0rpx 80rpx;"
				:class="position == 'center' ? 'text-center' : 'text-left'">
				{{ title }}
			</view>
			<view
				style="position: absolute;top:0;right: 20rpx;height: 100%;display: flex;justify-content: center;align-items: center;">
				<slot name='suffix'></slot>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		commonImages
	} from "@/common/images"
	export default {
		props: {
			// 标题背景颜色
			background: {
				type: String,
				default: "white"
			},
			// 标题
			title: {
				type: String,
			},
			// 标题的位置
			position: {
				type: String,
				default: "left",
				validator: function(value) {
					// 这个值必须匹配下列字符串中的一个
					return ['left', 'center'].indexOf(value) !== -1
				}
			},
			// 是否显示返回按钮
			showBack: {
				type: Boolean,
				default: true
			},
			// 是否展示navbar的下边框
			showBorder: {
				type: Boolean,
				default: false
			},
			// 是否自定义返回事件
			isCustomBack: {
				type: Boolean,
				default: false
			},
			// 自定义的返回事件
			customNavigateBack: {
				type: Function
			},
			// 标题字体颜色
			color: {
				type: String,
				default: "black",
				validator: function(value) {
					// 这个值必须匹配下列字符串中的一个
					return ['black', 'white'].indexOf(value) !== -1
				}
			},
		},
		data() {
			return {
				commonImages
			}
		},
		computed: {
			statusBar() {
				const e = uni.getSystemInfoSync();
				return e.statusBarHeight;
			},
			navBarHeight() {
				const e = uni.getSystemInfoSync();
				let navBarHeight = 45
				// #ifdef MP-WEIXIN
				//获取胶囊位置信息
				let menuBottonInfo = uni.getMenuButtonBoundingClientRect();
				// 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
				navBarHeight = menuBottonInfo.bottom - e.statusBarHeight + (menuBottonInfo.top - e.statusBarHeight);
				// #endif
				return navBarHeight
			},
		},
		methods: {
			// 点击返回键触发的事件
			goback() {
				if (this.isCustomBack) {
					this.customNavigateBack()
				} else {
					let pages = getCurrentPages()
					if (pages.length == 1) { // 处理H5刷新后的跳转，刷新后页面栈长度为1，统一跳转到首页
						uni.switchTab({
							url: "/pages/index/index"
						})
					} else {
						uni.navigateBack()
					}
				}
			},
		},
	}
</script>
<style>
	.show_border {
		border-bottom: 2rpx solid #E0E1E6;
	}
</style>